.portrait {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.portrait .portrait-img {
  position: relative;
  top: -40px;
  --s: 200px;
  --b: 4px;
  --f: 1;
  --c1: #f60;
  --c2: #fff;
  --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%;
  --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
  width: var(--s);
  height: var(--s) + 100px;
  padding-top: 100px;
  cursor: pointer;
  transition: 0.5s;
  outline: var(--b) solid var(--c1);
  outline-offset: var(--shrink);
  border-radius: 0 0 999px 999px;
  transform: scale(var(--f));
  background: radial-gradient(
      circle closest-side,
      var(--c2) calc(99% - var(--b)),
      var(--c1) calc(100% - var(--b)),
      var(--c1) 99%,
      transparent 100%
    )
    var(--bgOption);
  -webkit-mask: linear-gradient(#000 0 0) no-repeat center
      calc(0px - var(--shrink)) / calc(100% / var(--f) - 2.2 * var(--b)) 50%,
    radial-gradient(circle closest-side, #000 99%, transparent) var(--bgOption);
}
.portrait .portrait-img:hover {
  --f: 1.25;
}
